<template>
  <div class="device-list">
    <div>
      <label>{{ $t("route.DeviceManager") }}</label>
      <div></div>
      <button>
        <img /><label>{{ $t("route.Device_List") }}</label>
      </button>
      <div style="flex: 1; text-align: right">
        <el-button type="primary" @click="iotData">{{ $t("route.IOT_data") }}</el-button>
        <el-button type="success" @click="jumpPage('use-report')">{{
          $t("route.Usage_Report")
        }}</el-button>
        <el-button type="danger" @click="jumpPage('avuse-report')">{{
          $t("route.Usage_Summary")
        }}</el-button>
        <el-button type="info" @click="jumpPage('temp-report1')">{{
          $t("route.Temperature_report")
        }}</el-button>
      </div>
    </div>
    <div v-show="false">
      <el-select
        @change="factoryChange"
        style="margin-left: 10px"
        v-model="factory"
        placeholder="请选择工厂"
      >
        <el-option
          v-for="item in factoryList"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <div>
        <div>
          <label>{{ $t("route.Startup_situation") }}</label>
          <label>{{ time1 }}</label>
          <button @click="refresh(0)"></button>
        </div>
        <div>
          <el-select
            size="default"
            class="select"
            v-model="workshop1"
            @change="selectChange1"
            :placeholder="$t('route.Please_Select')"
          >
            <el-option
              v-for="item in workshopList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <div>
            <div v-if="chartShow" class="echart" id="echart-1"></div>
          </div>
        </div>
      </div>

      <div>
        <div>
          <label>{{ $t("route.classification_of_equipment") }}</label>
          <label>{{ time2 }}</label>
          <button @click="refresh(1)"></button>
        </div>
        <div>
          <el-select
            size="default"
            class="select"
            v-model="selectValue2"
            @change="selectChange2"
            :placeholder="$t('route.Please_Select')"
          >
            <el-option
              v-for="(item, index) in workshopStoreList"
              :label="item.name"
              :value="index"
            >
            </el-option>
          </el-select>
          <div>
            <div v-if="chartShow" class="echart" id="echart-2"></div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <label>{{ $t("route.service_life") }}</label>
          <label>{{ time3 }}</label>
          <button @click="refresh(2)"></button>
        </div>
        <div>
          <el-select
            size="default"
            class="select"
            v-model="selectValue3"
            @change="selectChange3"
            :placeholder="$t('route.Please_Select')"
          >
            <el-option
              v-for="(item, index) in workshopStoreList"
              :label="item.name"
              :value="index"
            />
          </el-select>
          <div>
            <div v-if="chartShow" id="echart-3" class="echart"></div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div>
        <div>
          <el-radio-group @change="locateTypeChange" v-model="query.locateType">
            <el-radio-button :label="$t('route.All')"></el-radio-button>
            <el-radio-button :label="$t('route.Workshop')"></el-radio-button>
            <el-radio-button :label="$t('route.Warehouse')"></el-radio-button>
          </el-radio-group>

          <el-cascader
            v-if="query.locateType == $t('route.Workshop')"
            size="default"
            class="mgr-left-10"
            :placeholder="$t('route.Please_select_a_group')"
            :options="proLineOptions"
            @change="proLineChange"
          />

          <el-select
            size="default"
            v-if="query.locateType == $t('route.Warehouse')"
            filterable
            class="select mgr-left-10"
            @change="selectChange4"
            v-model="query.store"
            :placeholder="$t('route.Please_select_a_warehouse')"
          >
            <el-option
              v-for="item in storeOptions"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>

          <el-select
            size="default"
            filterable
            class="select mgr-left-10"
            @change="selectChange5"
            v-model="query.kind"
            :placeholder="$t('route.Please_select_the_type')"
          >
            <el-option v-for="item in kindList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>

          <el-radio-group
            @change="powerOnChange"
            style="margin-left: 20px"
            v-model="query.powerOn"
          >
            <el-radio-button :label="$t('route.All')"></el-radio-button>
            <el-radio-button :label="$t('route.Startup')"></el-radio-button>
            <el-radio-button :label="$t('route.Shutdown')"></el-radio-button>
          </el-radio-group>
        </div>

        <div class="div-handle-right">
          <el-button @click="batchDelectClick">{{
            $t("route.Batch_deletion")
          }}</el-button>
          <el-button @click="jumpPage('ADD_DEVICE')">{{ $t("route.Add") }}</el-button>
          <el-button @click="searchClick">{{ $t("route.search") }}</el-button>
          <input
            v-model="query.search"
            :placeholder="$t('route.search') + '/' + $t('route.jockey')"
          />
        </div>
      </div>

      <el-table
        @selection-change="handleSelectionChange"
        class="table"
        :data="deviceList"
        style="width: 100%"
      >
        <el-table-column type="selection" width="45" />
        <el-table-column prop="powerOn" :label="$t('route.state')" width="60">
          <template #default="scope">
            <div :style="{ color: scope.row.powerOn ? '#0f0' : '#888' }">
              {{ scope.row.powerOn ? $t("route.Startup") : $t("route.Shutdown") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="kind" :label="$t('route.All2')" width="120" />
        <el-table-column prop="noseCode" :label="$t('route.Head_Model')" width="200" />
        <el-table-column :label="$t('route.location')">
          <template #default="scope">
            {{ scope.row.factory }}
            {{
              scope.row.workshop
                ? scope.row.workshop + " " + scope.row.proLine
                : scope.row.store
            }}
          </template>
        </el-table-column>
        <el-table-column prop="nickname" :label="$t('route.jockey')" width="130" />
        <el-table-column :label="$t('route.Working_position')" width="80">
          <template #default="scope">
            {{ formatState(scope.row.state) }}
          </template>
        </el-table-column>
        <el-table-column prop="brand" :label="$t('route.brand')" width="80" />
        <el-table-column :label="$t('route.ascription')" width="100">
          <template #default="scope">
            {{
              scope.row.belong == 0
                ? $t("route.The_Company")
                : $t("route.Other_companies")
            }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('route.Purchase_Date')" width="120">
          <template #default="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('route.operate')">
          <template #default="scope">
            <el-button @click="jumpPage('USE_RECORD', scope.row.id)" type="text">{{
              $t("route.Usage_record")
            }}</el-button>
            <el-button
              @click="jumpPage('repair-record', scope.row.noseCode)"
              type="text"
              >{{ $t("route.maintenance_record") }}</el-button
            >
            <el-button
              style="color: #669900"
              @click="jumpPage('EDIT_DEVICE', scope.row.id)"
              type="text"
              >{{ $t("route.see") }}</el-button
            >
            <el-button
              style="color: #ff0000"
              @click="deleteClick(scope.row.id)"
              type="text"
              >{{ $t("route.Delete") }}</el-button
            >
            <el-button
              style="color: #669900"
              @click="jumpPage('IOT_DEVICE', scope.row)"
              type="text"
              >{{ $t("route.IOT_data") }}</el-button
            >
            <el-button
              v-show="scope.row.temped"
              @click="jumpPage('device-temp', scope.row)"
              type="text"
              >{{ $t("route.temperature") }}</el-button
            >
            <!-- <el-button @click='jumpPage("temp-report", scope.row)' type="text">{{ $t('route.Temperature_report')
						}}</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <div>
        <el-pagination
          style="float: right"
          background
          @current-change="handlePageChange"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          layout="total, prev, pager, next"
          :total="query.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import Constant from "../../js/common/constant.js";
import * as echarts from "echarts";
import MqttUtils from "../../js/common/mqtt-utils";
export default {
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        search: null,
        kind: this.$t("route.All_categories"),
        powerOn: this.$t("route.All"),
        locateType: this.$t("route.All"),
        workshop: null,
        proLine: null,
        store: null,
      },
      deviceList: [],
      user: null,
      proLineOptions: [],
      storeOptions: [],
      workshopList: [],
      workshopStoreList: [],
      selectValue2: this.$t("route.All"),
      selectValue3: this.$t("route.All"),
      selectValue4: this.$t("route.All"),
      selectIndex4: 0,
      workshop1: this.$t("route.All_workshops"),
      selDevice: {},
      time1: null,
      time2: null,
      time3: null,
      kindList: [],
      factoryList: [],
      chartShow: false,
      speed: 4500,
      stitch: 2.5,
      selectRowList: [],
    };
  },
  methods: {
    iotData() {
      this.$router.push({
        name: "IOT_DATA",
      });
    },
    factoryChange() {
      this.getDeviceList();
      this.getDevicePowerOnReport();
      this.getKindDeviceReport1(0);
      this.getDeviceUseDurReport(0);
    },
    proLineChange(value) {
      this.query.workshop = value[0];
      this.query.proLine = value[1];
      this.getDeviceList();
    },
    selectChange4() {
      this.getDeviceList();
    },
    locateTypeChange() {
      if (this.query.locateType == this.$t("route.All")) {
        this.query.workshop = null;
        this.query.proLine = null;
        this.query.store = null;
      } else if (this.query.locateType == this.$t("route.Workshop")) {
        this.query.workshop = this.$t("route.All_workshops");
        this.query.proLine = null;
        this.query.store = "";
      } else if (this.query.locateType == this.$t("route.Warehouse")) {
        this.query.workshop = "";
        this.query.proLine = "";
        this.query.store = this.$t("route.All_warehouses");
      }
      this.getDeviceList();
    },

    // 选择表格行
    handleSelectionChange(val) {
      this.selectRowList = val;
    },
    deleteClick(deviceId) {
      this.$confirm(this.$t("route.continue3"), this.$t("route.reminder"), {
        confirmButtonText: this.$t("route.sure"),
        cancelButtonText: this.$t("route.cancel"),
        type: "warning",
      }).then(() => {
        http.post(
          api.DELETE_DEVICE,
          {
            deviceId: deviceId,
          },
          (data) => {
            this.$message.success(this.$t("route.Delete_succeeded"));
            this.getDeviceList();
          }
        );
      });
    },
    formatState(state) {
      //0:没有异常 1:普通维修 2:大修 3报废 4:异常报警
      if (state == 0) {
        return this.$t("route.normal");
      } else if (state == 1) {
        return this.$t("route.General_maintenance");
      } else if (state == 2) {
        return this.$t("route.Overhaul");
      } else if (state == 3) {
        return this.$t("route.Scrap");
      } else if (state == 4) {
        return this.$t("route.Abnormal_alarm");
      }
    },

    jumpPage(pathName, param) {
      this.$router.push({
        name: pathName,
        params: {
          device: JSON.stringify(param),
          deviceId: param,
          noseCode: param,
        },
      });
    },
    refresh(type) {
      if (type == 0) {
        this.getDevicePowerOnReport();
      } else if (type == 1) {
        this.getKindDeviceReport1(0);
      } else if (type == 2) {
        this.getDeviceUseDurReport(0);
      }
    },

    selectChange2(value) {
      this.getKindDeviceReport1(value);
    },
    selectChange3(value) {
      this.getDeviceUseDurReport(value);
    },
    powerOnChange(value) {
      this.getDeviceList();
    },
    getDeviceList() {
      var powerOn = null;
      if (this.query.powerOn == this.$t("route.Startup")) {
        powerOn = true;
      } else if (this.query.powerOn == this.$t("route.Shutdown")) {
        powerOn = false;
      }
      var params = {
        adminId: this.user.id,
        factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
        workshop:
          this.query.workshop == this.$t("route.All_workshops")
            ? null
            : this.query.workshop,
        proLine:
          this.query.proLine == this.$t("route.All_groups") ? null : this.query.proLine,
        store:
          this.query.store == this.$t("route.All_warehouses") ? null : this.query.store,
        powerOn: powerOn,
        kind: this.query.kind == this.$t("route.All_categories") ? null : this.query.kind,
        search: this.query.search,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
        ptemped: this.query.ptemped,
      };
      http.post(api.GET_DEVICE_LIST2, params, (data) => {
        this.deviceList = data.data.deviceList;
        this.query.total = data.data.total;
        // for (var item of this.deviceList) {
        //"$SYS/brokers/+/clients/SN12345678/#";
        // MqttUtils.addTopic('$SYS/brokers/+/clients/' + item.serialNum + '/#');
        // }
      });
    },
    handlePageChange(pageNum) {
      this.query.pageNum = pageNum;
      this.getDeviceList();
    },
    searchClick() {
      this.query.pageNum = 1;
      this.getDeviceList();
    },
    selectChange5() {
      this.query.pageNum = 1;
      this.getDeviceList();
    },
    batchDelectClick() {
      this.$confirm("此操作将永久删除选中设备, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var deviceIdList = [];
        for (var item of this.selectRowList) {
          deviceIdList.push(item.id);
        }
        http.post(
          api.DELETE_DEVICE_LIST,
          {
            deviceIdList: deviceIdList,
          },
          (data) => {
            this.$message.success("删除成功");
            this.getDeviceList();
          }
        );
      });
    },
    getAllWorkshop() {
      http.post(
        api.GET_ALL_WORKSHOP_NAME,
        {
          adminId: this.user.id,
          factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
        },
        (data) => {
          this.workshopList = data.data;
          this.workshopList.unshift(this.$t("route.All_workshops"));
          this.workshop1 = this.workshopList[0].name;
        }
      );
    },
    getWorkshopStore() {
      http.post(
        api.GET_WORKSHOP_STORE,
        {
          adminId: this.user.id,
          factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
        },
        (data) => {
          this.workshopStoreList = data.data;
          this.workshopStoreList.splice(0, 0, {
            type: 0,
            name: this.$t("route.All"),
          });
        }
      );
    },
    getAllStore() {
      http.post(
        api.GET_ALL_STORE2,
        {
          adminId: this.user.id,
        },
        (data) => {
          this.storeOptions = data.data;
          this.storeOptions.unshift(this.$t("route.All_warehouses"));
        }
      );
    },
    selectChange1() {
      this.getDevicePowerOnReport();
    },
    formatDur(dur) {
      return CommonUtils.formatDur(dur);
    },
    getDevicePowerOnReport() {
      http.post(
        api.GET_DEVICE_POWERON_REPORT,
        {
          adminId: this.user.id,
          factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
          workshop:
            this.workshop1 == this.$t("route.All_workshops") ? null : this.workshop1,
        },
        (data) => {
          var reportDara = [];
          reportDara.push({
            value: data.data.powerOnCount,
            name: this.$t("route.Startup"),
          });
          reportDara.push({
            value: data.data.powerOffCount,
            name: this.$t("route.Shutdown"),
          });
          this.initEchart1(reportDara);
          this.time1 = new Date().format("yyyy-MM-dd hh:mm:ss");
        }
      );
    },

    getKindDeviceReport1(index) {
      var reqType = 0;
      var search = null;
      if (index != 0) {
        var obj = this.workshopStoreList[index];
        reqType = obj.type;
        search = obj.name;
      }
      http.post(
        api.GET_KIND_DEVICE_REPORT1,
        {
          adminId: this.user.id,
          factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
          reqType: reqType,
          search: search,
        },
        (data) => {
          var reportDara = [];
          for (var item of data.data) {
            reportDara.push({
              value: item.num,
              name: item.kind,
            });
          }
          this.initEchart2(reportDara);
          this.time2 = new Date().format("yyyy-MM-dd hh:mm:ss");
        }
      );
    },

    getDeviceUseDurReport(index) {
      var reqType = 0;
      var search = null;
      if (index != 0) {
        var obj = this.workshopStoreList[index];
        reqType = obj.type;
        search = obj.name;
      }
      http.post(
        api.GET_DEVICE_USE_DUR_REPORT,
        {
          adminId: this.user.id,
          factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
          reqType: reqType,
          search: search,
        },
        (data) => {
          this.initEchart3(data.data);
          this.time3 = new Date().format("yyyy-MM-dd hh:mm:ss");
        }
      );
    },

    initEchart1(data) {
      var chartDiv = document.getElementById("echart-1");
      if (!chartDiv) return;
      var myChart = echarts.init(chartDiv);
      var option = CommonUtils.initRingOption(
        null,
        this.$t("route.Startup_situation"),
        data,
        ["#66FF33", "#999999"]
      );
      myChart.setOption(option);
    },
    initEchart2(data) {
      var chartDiv = document.getElementById("echart-2");
      if (!chartDiv) return;
      var myChart = echarts.init(chartDiv);
      var option = CommonUtils.initRingOption(
        null,
        this.$t("route.classification_of_equipment"),
        data
      );
      myChart.setOption(option);
    },
    initEchart3(data) {
      var chartDiv = document.getElementById("echart-3");
      if (!chartDiv) return;
      var myChart = echarts.init(chartDiv);
      var option = CommonUtils.initRingOption(null, this.$t("route.service_life"), data);
      myChart.setOption(option);
    },
    getPorLineRow() {
      http.post(
        api.GET_POR_LINE_ROW,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          for (var item of data.data) {
            var children = item.children;
            children.unshift({
              value: this.$t("route.All_groups"),
              label: this.$t("route.All_groups"),
            });
          }
          this.proLineOptions = data.data;
          this.proLineOptions.unshift({
            value: this.$t("route.All_workshops"),
            label: this.$t("route.All_workshops"),
          });
        }
      );
    },
    getAllKind() {
      http.post(
        api.GET_ALL_KIND,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.kindList = [this.$t("route.All_categories"), ...data.data];
        }
      );
    },
    getAllFactory() {
      http.post(
        api.GET_ALL_FACTORY,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.factoryList = [
            {
              name: "全部工厂",
            },
            ...data.data,
          ];
        }
      );
    },
  },

  created() {
    this.chartShow = true;
    this.user = this.$store.state.user;
    this.kindList = [this.$t("route.All_categories"), ...Constant.DEVICE_KIND];
    this.query.kind = CommonUtils.getParam(this, "kind", "setKind");
    this.getDeviceList();
    this.getAllWorkshop();
    this.getPorLineRow();
    this.getAllStore();
    this.getWorkshopStore();
    this.getDevicePowerOnReport();
    this.getKindDeviceReport1(0);
    this.getDeviceUseDurReport(0);
    this.getAllKind();
    this.getAllFactory();
  },
};
</script>
<style lang="scss" scoped>
.device-list {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  > div:nth-of-type(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    > label:nth-of-type(1) {
      font-weight: 600;
    }

    > div:nth-of-type(1) {
      width: 1px;
      background-color: #cccccc;
      height: 15px;
      margin: 0px 20px;
    }

    > button:nth-of-type(1) {
      background-image: url(../../assets/img/customer-1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 10px;
      border: 0px;
      display: flex;
      color: #ffffff;
      flex-direction: row;
      align-items: center;
      font-weight: 800;

      > img {
        margin-right: 7px;
        width: 15px;
        height: 15px;
        content: url(../../assets/img/customer-2.png);
      }
    }
  }
  > div:nth-of-type(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 10px 20px;
    border-radius: 5px;
  }

  > div:nth-of-type(3) {
    margin-top: 20px;
    display: flex;
    flex-direction: row;

    > div:nth-of-type(2) {
      margin: 0px 20px;
    }

    > div {
      flex: 1;
      background-color: #ffffff;
      padding: 40px;
      border-radius: 5px;

      > div:nth-of-type(1) {
        display: flex;
        flex-direction: row;
        align-items: center;

        > label:nth-of-type(1) {
          color: #000000;
          font-size: 18px;
          margin-bottom: 10px;
        }

        > label:nth-of-type(2) {
          color: #999999;
          font-size: 17px;
          text-align: right;
          flex: 1;
        }

        > button:nth-of-type(1) {
          background-image: url(../../assets/img/refresh.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-color: #ffffff;
          width: 20px;
          border: none;
          height: 20px;
          margin-left: 10px;
        }
      }

      > div:nth-of-type(2) {
        height: 155px;

        > div:nth-of-type(1) {
          > div:nth-of-type(1) {
          }
        }
      }
    }
  }

  > div:nth-of-type(4) {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    > div:nth-of-type(1) {
      display: flex;
      flex-direction: row;
      align-items: center;

      > div:nth-of-type(1) {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .div-handle-right {
        flex: 1;
        flex-direction: row-reverse;
        text-align: right;
        display: flex;
        align-items: center;

        > input:nth-of-type(1) {
          border: 1px solid #eeeeee;
          font-size: 15px;
          width: 150px;
          padding: 5px 8px;
          outline: none;
        }

        > button {
          color: #a866ff;
          margin-left: 10px;
          padding: 4px 10px;
        }
      }

      > div:nth-of-type(2),
      > div:nth-of-type(3) {
        margin-left: 10px;
      }
    }

    .table {
      margin-top: 20px;
    }
  }

  .select {
    width: 120px;
  }

  .echart {
    height: 150px;
    width: 100%;
  }
}
</style>
